<template>
  <div class="table-info-all-root">
    <!-- 搜索框 -->
    <div class="table-operator">
      <el-input class="search-input" v-model="dataSearch" placeholder="搜索" />
    </div>

    <!-- 说明链接 -->
    <div class="table-desc">
      更多指标信息及说明，请查看：<el-link style="font-size: 12px;" @click="toView('https://redis.io/commands/info/')">https://redis.io/commands/info/</el-link>
    </div>

    <!-- 列表 -->
    <div class="table">
      <el-table border height="100%" tooltip-effect="dark" :highlight-current-row="true" :data="searchTableDatas">
        <el-table-column prop="key" width="200" :show-overflow-tooltip=true label="Key" />
        <el-table-column prop="value" width="100" :show-overflow-tooltip=true align="right" label="value" />
        <el-table-column prop="desc" width="400" :show-overflow-tooltip=true label="说明" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { isNull } from "@/assets/utils/obj";
import { toView } from "@/assets/utils/util";

const dataSearch = ref('');
const tableDatas = ref([{}])

const searchTableDatas = computed(() => {
  return tableDatas.value.filter((filter: any) => {
    if (isNull(dataSearch.value)) {
      return true;
    }
    return filter.key.toLowerCase().includes(dataSearch.value.toLowerCase())
  })
})

const initList = (info: any) => {
  tableDatas.value = info;
}

defineExpose({
  initList
})
</script>

<style scoped lang="scss">
.table-info-all-root {
  @include box(100%, 100%);

  .table-operator {
    @include box(100%, 30px);
    @include flex(row, space-around, center);
  }

  .table-desc {
    @include box(100%, 30px);
    @include flex(row, flex-start, center);
    @include themeColor(#AE564C, #aa4d45);
    @include themeBg(#AE564C45, #AA4D452C);
    font-size: 12px;
    padding: 5px;
    margin: 2px 0 5px 0;
    border-radius: 5px;
  }

  .table {
    @include box(100%, calc(100% - 30px - 35px));

    :deep(.el-table--small .el-table__cell) {
      padding: 1px 0;
    }
  }
}
</style>